//创建cookie
function createCookie(name, value, days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    } else
        var expires = "";
    document.cookie = name + "=" + value + expires + "; path=/";
}
function gotobaidu(type)
{
    if(document.querySelectorAll("input[name=origin]")[0].value.trim() == "") {
        alert("请输入起点");
        return;
    }
    else {
        if(type == 1) {
            document.querySelectorAll("input[name=mode]")[0].value = "transit";
            document.querySelector("#gotobaiduform").submit();
        }
        else if(type == 2) {
            document.querySelectorAll("input[name=node]")[0].value = "driving";
            document.querySelector("#gotobaiduform").submit();
        }
    }
}
//读取cookie值
function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ')
            c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0)
            return c.substring(nameEQ.length, c.length);
    }
    return null;
}

//清空cookie
function eraseCookie(name) {
    createCookie(name, "", -1);
}
var lsMask = document.querySelector("#lsMask"),
    lsMask1 = document.querySelector("#lsMask1"),
    lsMask2 = document.querySelector("#lsMask2"),
    bodyWidth = window.screen.width,
    bodyHeight = window.screen.height;

if(navigator.userAgent.indexOf("Android")>0) {
    bodyWidth = bodyWidth / 2;
    bodyHeight = bodyHeight / 2;
}

var showQRCodePage;
if(readCookie("showQRCodePage") == null) {
    createCookie("showQRCodePage", "hidden", 30);
}

showQRCodePage = readCookie("showQRCodePage");

var bezier = "cubic-bezier(0.645,0.045,0.355,1)";

document.body.addEventListener("touchmove", function (evt) {
    evt.preventDefault();
}, false);

var updateElementTransition = function (_target, _duration, callback) {
    _target.style.transition = "transform "+_duration/1000+"s cubic-bezier(.43,0,.25,1)";
    _target.style.webkitTransition = "-webkit-transform "+_duration/1000+"s cubic-bezier(.43,0,.25,1)";
    _target.style.mozTransition = "-moz-transform "+_duration/1000+"s cubic-bezier(.43,0,.25,1)";
    _target.style.oTransition = "-o-transform "+_duration/1000+"s cubic-bezier(.43,0,.25,1)";

    if(callback) {
        setTimeout(function () {
            callback();
        }, _duration);
    }
};
var updateElementTransform = function(_target, _left, _top, _duration, callback) {
    _target.style.transform = "translate("+_left+"px, "+_top+"px)";
    _target.style.webkitTransform = "translate("+_left+"px, "+_top+"px)";
    _target.style.mozTransform = "translate("+_left+"px, "+_top+"px)";
    _target.style.oTransform = "translate("+_left+"px, "+_top+"px)";

    if(typeof _duration === "number") {
        if(callback) {
            updateElementTransition(_target, _duration, callback);
        }
        else {
            updateElementTransition(_target, _duration);
        }
    }
};

var lsScaleTo = function (_targetId, _opacity, _scaleX, _scaleY, _duration, _delay, _direction) {

    var selfTimeout = setTimeout(function() {
        if(_direction !== 0) {
            var target = document.getElementById(_targetId);
            if(_opacity === 0) {
                target.style.opacity = _opacity;
                target.style.transform = "scale(" + _scaleX + ", " + _scaleY + ")";
                target.style.webkitTransform = "scale(" + _scaleX + ", " + _scaleY + ")";
                target.style.transition = "transform " + bezier + " " + _duration/1000 + "s, opacity .4s";
                target.style.webkitTransition = "-webkit-transform " + bezier + " " + _duration/1000 + "s, opacity .4s";
                setTimeout(function () {
                    target.style.display = "none";
                }, _duration);
            }
            else {
                target.style.display = "block";
                setTimeout(function () {
                    target.style.opacity = _opacity;
                    target.style.transform = "scale(" + _scaleX + ", " + _scaleY + ")";
                    target.style.webkitTransform = "scale(" + _scaleX + ", " + _scaleY + ")";
                    target.style.transition = "transform " + bezier + " " + _duration/1000 + "s, opacity .4s";
                    target.style.webkitTransition = "-webkit-transform " + bezier + " " + _duration/1000 + "s, opacity .4s";
                }, 17);
            }
            clearTimeout(selfTimeout);
        }
    }, _delay);
};

var lsTranslateTo = function (_targetId, _opacity, _translateX, _translateY, _duration, _delay, _direction, _scaleRate, _callback) {

    var translateTimeout = setTimeout(function () {
        if(_direction !== 0) {
            var target = document.getElementById(_targetId);
            if(_opacity == 1) {
                target.style.display = "block";
            }
            else {
            }
            setTimeout(function () {
                _translateX = (_translateX.toString().indexOf("%")>0?_translateX:(_translateX+"px"));
                _translateY = (_translateY.toString().indexOf("%")>0?_translateY:(_translateY+"px"));
                target.style.opacity = _opacity;

                target.style.transform = "translate("+_translateX+", "+_translateY+") scale("+_scaleRate+","+_scaleRate+")";
                target.style.webkitTransform = "translate("+_translateX+", "+_translateY+") scale("+_scaleRate+","+_scaleRate+")";
                target.style.mozTransform = "translate("+_translateX+", "+_translateY+") scale("+_scaleRate+","+_scaleRate+")";
                target.style.oTransform = "translate("+_translateX+", "+_translateY+") scale("+_scaleRate+","+_scaleRate+")";
//                target.style.transition = "opacity .4s " + bezier + " , transform " + _duration + "ms " + bezier;
//                target.style.webkitTransition = "opacity .4s " + bezier + " , -webkit-transform " + _duration + "ms " + bezier;
//                target.style.mozTransition = "opacity .4s " + bezier + " , -moz-transform " + _duration + "ms " + bezier;
//                target.style.oTransition = "opacity .4s " + bezier + " , -o-transform " + _duration + "ms " + bezier;

//                    updateElementTransition(target, _duration);
                target.style.transition = "transform "+_duration+"ms cubic-bezier(.43,0,.25,1), opacity " + _duration + "ms cubic-bezier(.43,0,.25,1)";
                target.style.webkitTransition = "-webkit-transform "+_duration+"ms cubic-bezier(.43,0,.25,1), opacity " + _duration + "ms cubic-bezier(.43,0,.25,1)";
                target.style.mozTransition = "-moz-transform "+_duration+"ms cubic-bezier(.43,0,.25,1), opacity " + _duration + "ms cubic-bezier(.43,0,.25,1)";
                target.style.oTransition = "-o-transform "+_duration+"ms cubic-bezier(.43,0,.25,1), opacity " + _duration + "ms cubic-bezier(.43,0,.25,1)";
                setTimeout(function () {
                    if(_callback) {
                        _callback();
                    }
                    if(_opacity == 0) {
                        target.style.display = "none";
                    }
                }, _duration);
                clearTimeout(translateTimeout);
            }, 20);
        }
        LsSlider.setDelay(_delay/2);
    }, _delay);

};

var lsFade = function (_targetId, _opacity, _duration, _delay) {
    var fadeTimeout = setTimeout(function () {
        var target = _targetId;

        target.style.opacity = _opacity;
        target.style.transition = "opacity " + _duration + "ms " +bezier;
        target.style.webkitTransition = "opacity " + _duration + "ms " +bezier;
        target.style.mozTransition = "opacity " + _duration + "ms " +bezier;
        target.style.oTransition = "opacity " + _duration + "ms " +bezier;

        clearTimeout(fadeTimeout);
    }, _delay);
};

LsSlider.initialize({});

// _target：动画对象
// _x：对象起始横坐标
// _y：对象起始纵坐标
// _dis：动画持续的距离
// _direction：动画的方向
// _fadeIn：为true时，表示隐现；为false时，表示隐退
// _duration：动画的过渡时间
var beforeSlide = function (_target, _x, _y, _disX, _disY, _direction, _fadeIn, _duration, _callback) {
    if(_direction === 0) {
    }
    else {
//            _target.style.opacity = _fadeIn?1:0;
        if(_fadeIn) {
            _target.style.display = "block";

            setTimeout(function () {
                _target.style.opacity = 1;
                switch (_direction) {
                    case 1:
                        updateElementTransform(_target, (_x + _disX), (_y + _disY));
                        break;
                    case 2:
                        updateElementTransform(_target, (_x + Math.abs(_disX)), (_y - Math.abs(_disY)));
                        break;
                    case 3:
                        updateElementTransform(_target, (_x + _disX), (_y + _disY));
                        break;
                    case 4:
                        updateElementTransform(_target, (_x - Math.abs(_disX)), (_y + Math.abs(_disY)));
                        break;
                    default :
                        break;
                }

                _target.style.transition = "all "+_duration+"ms " + bezier;
                _target.style.webkitTransition = "all "+_duration+"ms " + bezier;
            }, 17);
        }
        else {
            switch (_direction) {
                case 1:
                    updateElementTransform(_target, (_x - _disX), (_y - 2*Math.abs(_disY)));
                    break;
                case 2:
                    updateElementTransform(_target, (_x - Math.abs(_disX)), _y);
                    break;
                case 3:
                    updateElementTransform(_target, (_x - _disX), (_y + Math.abs(_disY)));
                    break;
                case 4:
                    updateElementTransform(_target, (_x - 2*Math.abs(_disX)), _y);
                    break;
                default :
                    break;
            }
            _target.style.opacity = 0;
            _target.style.transition = "all "+_duration+"ms " + bezier;
            _target.style.webkitTransition = "all "+_duration+"ms " + bezier;
            setTimeout(function () {
                _target.style.display = "none";
            }, _duration);

        }

        LsSlider.setDelay(_duration/4);

        setTimeout(function () {
            if(_callback) {
                _callback();
            }
        }, _duration);
    }
};

var $CurrentH = 0,
    $CurrentV = 0;

LsSlider.addEventListener("beforeslide", function(event) {
    var $direction = event.direction;
    if($CurrentH === 0 && $CurrentV === 0) {
        if(document.querySelector("#tips") !== null && $direction !== 0) {
            var tips = document.querySelector("#tips");
            tips.style.opacity = 0;
        }
        if($direction === 1) {
            updateElementTransform(document.querySelector("#lsQRCode"), 0, -1000, 800);
            var target1 = document.getElementById("11-a");
            beforeSlide(target1, -100, 84, 0, 0, $direction, false, 400);
            var target2 = document.getElementById("11-b");
            beforeSlide(target2, -130, 30, 0, 0, $direction, false, 600);
            beforeSlide(document.getElementById("11-c"), 330, 30, 0, 0, $direction, false, 800);
            beforeSlide(document.getElementById("11-d"), 0, 180, 0, 0, $direction, false, 800);
            lsTranslateTo("11-e", 0, "-100%", 155, 800, 100, $direction, 1);
            lsScaleTo("11-f", 0, 0, 0, 400, 10, $direction);
            lsTranslateTo("11-g", 0, "-100%", 0, 600, 100, $direction, 1);
            lsTranslateTo("11-h", 0, "-100%", 0, 500, 100, $direction, 1);
        }
        else {

        }
    }
    else if($CurrentH === 0 && $CurrentV === 1) {
        beforeSlide(document.getElementById("12-a"), 500, -500, 0, 0, $direction, false, 500);
        lsScaleTo("12-b", 0, 0, 0, 300, 10, $direction);
        beforeSlide(document.getElementById("12-c"), 500, 0, 0, 0, $direction, false, 500);
        beforeSlide(document.getElementById("12-d"), -400, 0, 0, 0, $direction, false, 500);
    }
    else if($CurrentH === 0 && $CurrentV === 2) {
        beforeSlide(document.getElementById("13-a"), 0, -500, 0, 0, $direction, false, 400);
        beforeSlide(document.getElementById("13-b"), -300, 150, 0, 0, $direction, false, 200);
        beforeSlide(document.getElementById("13-c"), 500, 150, 0, 0, $direction, false, 200);
        lsScaleTo("13-d", 0, 0, 0, 300, 10, $direction);
        beforeSlide(document.getElementById("13-e"), 500, 0, 0, 0, $direction, false, 500);
        beforeSlide(document.getElementById("13-f"), -400, 0, 0, 0, $direction, false, 500);
    }
    else if($CurrentH === 0 && $CurrentV === 3) {
        lsScaleTo("14-a", 0, 0, 0, 300, 10, $direction);
        beforeSlide(document.getElementById("14-b"), 500, 0, 0, 0, $direction, false, 500);
        beforeSlide(document.getElementById("14-c"), -400, 0, 0, 0, $direction, false, 500);
    }
    else if($CurrentH === 0 && $CurrentV === 4) {
//            beforeSlide(document.getElementById("15-d"), 500, -500, 0, 0, $direction, false, 500);
        lsScaleTo("15-d", 0, 0, 0, 500, 10, $direction);
        lsScaleTo("15-a", 0, 0, 0, 300, 40, $direction);
        beforeSlide(document.getElementById("15-b"), 500, 0, 0, 0, $direction, false, 500);
        beforeSlide(document.getElementById("15-c"), -400, 0, 0, 0, $direction, false, 500);
    }
    else if($CurrentH === 0 && $CurrentV === 5) {
        lsTranslateTo("16-e", 1, 0, 0, 100, 20, $direction, 0);
        lsTranslateTo("16-f", 1, 0, 0, 200, 50, $direction, 0);
        lsTranslateTo("16-g", 1, 0, 0, 300, 60, $direction, 0);
        lsTranslateTo("16-h", 1, 0, 0, 400, 70, $direction, 0, function () {


//                beforeSlide(document.getElementById("16-f"), 500, 0, 0, 0, $direction, false, 700);


        });
        setTimeout(function () {
            document.querySelectorAll(".flashlight")[0].classList.remove("flash");
            beforeSlide(document.getElementById("16-a"), 500, 0, 0, 0, $direction, true, 50, function () {
                beforeSlide(document.getElementById("16-b"), 500, 0, 0, 0, $direction, true, 300);
            });
        }, 20);
        beforeSlide(document.getElementById("16-c"), 500, 0, 0, 0, $direction, false, 500);
        beforeSlide(document.getElementById("16-d"), -400, 0, 0, 0, $direction, false, 500);
//            if(readCookie("showQRCodePage") === "show") {
//                updateElementTransform(document.querySelector("#lsQRCode"), 0, -1000, 800);
//            }
//            else {
//
//            }
//            lsScaleTo("11-f", 0, 0, 0, 400, 10, $direction);
    }
    else if($CurrentH === 0 && $CurrentV === 6) {
//            lsTranslateTo("17-a", 0, 0, 0, 500, 100, $direction, 1);
        $("#17-a").hide();
        lsTranslateTo("17-b", 0, 0, 0, 500, 100, $direction, 1);
//            document.querySelector("#bigBg").style.transform = "scale(1, 1)";
//            document.querySelector("#bigBg").style.webkitTransform = "scale(1, 1)";

//            $("#17-c").hide();
    }
    else if($CurrentH === 0 && $CurrentV === 7) {
        lsScaleTo("18-a", 0, 0, 0, 200, 10, $direction);
//            lsTranslateTo("18-b", 0, 0, 0, 300, 50, $direction, 1);
        lsTranslateTo("18-c", 0, 0, 0, 400, 80, $direction, 1);
        if(readCookie("showQRCodePage") === "show") {
            updateElementTransform(document.querySelector("#lsQRCode"), 0, -1000, 800);
        }
        else {

        }
    }
});

var userActionAvailable = false;

setTimeout(function () {
    var target1 = document.getElementById("11-a");
    beforeSlide(target1, -100, 84, 100, 0, 3, true, 400);
}, 50);

setTimeout(function () {
    var target2 = document.getElementById("11-b");
    beforeSlide(target2, -130, 30, 130, 0, 3, true, 500);
}, 80);

setTimeout(function () {
    var target3 = document.getElementById("11-c");
    beforeSlide(target3, 330, 30, -330, 0, 3, true, 600);
}, 100);
setTimeout(function () {
    var target4 = document.getElementById("11-d");
    beforeSlide(target4, 0, 180, 0, -68, 3, true, 800);
}, 200);
//    setTimeout(function () {
//        var target5 = document.getElementById("11-e");
//        beforeSlide(target5, "-100%", 200, "100%", 0, 3, true, 800);
//    }, 300);
lsTranslateTo("11-e", 1, "100%", 155, 800, 500, 3, 1);
lsScaleTo("11-f", 1, 1, 1, 400, 300, 3);
lsTranslateTo("11-g", 1, "0%", 0, 600, 600, 3, 1);
lsTranslateTo("11-h", 1, "0%", 0, 800, 700, 3, 1);
var lsProgress = document.querySelector("#lsProgress");
lsProgress.style.display = "block";
LsSlider.slidePause();
// 正在加载进度条，不允许用户操作。
userActionAvailable = false;

var _start = function (evt) {
    evt.preventDefault();
};
document.body.addEventListener("touchstart", _start, false);

var progressTimeout = setTimeout(function () {

    LsSlider.slidePause();
    // 正在加载进度条，不允许用户操作。
    userActionAvailable = false;

    lsProgress.style.opacity = 1;
    lsProgress.style.transition = "opacity .4s ease-in-out";
    lsProgress.style.webkitTransition = "opacity .4s ease-in-out";
    lsProgress.style.mozTransition = "opacity .4s ease-in-out";
    lsProgress.style.oTransition = "opacity .4s ease-in-out";

    var progressBegin = setTimeout(function () {
        lsProgress.querySelectorAll("div")[0].classList.add("expand");
        var progressEnd = setTimeout(function () {
            var stages = document.getElementsByClassName("stage");
            for(var s = 0; s < stages.length; s++) {
                stages[s].style.display = "block";
            }
            // 进度条加载完成
            lsProgress.style.opacity = 0;
            var tips = document.querySelector("#tips");
            tips.style.transition = "opacity .4s ease-in-out";
            tips.style.webkitTransition = "opacity .4s ease-in-out";
            tips.style.mozTransition = "opacity .4s ease-in-out";
            tips.style.oTransition = "opacity .4s ease-in-out";
            var progressHidden = setTimeout(function () {
                document.body.removeEventListener("touchstart", _start);
                lsProgress.style.display = "none";
                LsSlider.slideRestart();
                document.getElementsByClassName("arrow")[0].style.display = "block";
                userActionAvailable = true;
                tips.style.opacity = 1;
                showQRCode();
                clearTimeout(progressHidden);
                clearTimeout(progressEnd);
                clearTimeout(progressBegin);
                clearTimeout(progressTimeout);
            }, 400);
        }, 2500);
    }, 400);
}, 1000);
LsSlider.addEventListener("slidechanged", function (event) {
    var $indexh = event.indexh,
        $indexv = event.indexv;
    var $direction = event.direction;

    if($indexh === 0 && $indexv === 0) {
        if(document.querySelector("#tips") !== null) {
            var tips = document.querySelector("#tips");
            tips.style.opacity = 1;
        }
        setTimeout(function () {
            var target1 = document.getElementById("11-a");
            beforeSlide(target1, -100, 84, 100, 0, $direction, true, 400);
        }, 50);

        setTimeout(function () {
            var target2 = document.getElementById("11-b");
            beforeSlide(target2, -130, 30, 130, 0, $direction, true, 500);
        }, 80);

        setTimeout(function () {
            var target3 = document.getElementById("11-c");
            beforeSlide(target3, 330, 30, -330, 0, $direction, true, 600);
        }, 100);
        setTimeout(function () {
            var target4 = document.getElementById("11-d");
            beforeSlide(target4, 0, 180, 0, -68, $direction, true, 800);
        }, 200);
        setTimeout(function () {
            var target5 = document.getElementById("11-e");
            beforeSlide(target5, "-100%", 200, "100%", 0, $direction, true, 800);
        }, 300);
        lsTranslateTo("11-e", 1, "100%", 155, 800, 500, $direction, 1);
        lsScaleTo("11-f", 1, 1, 1, 400, 300, $direction);
        lsTranslateTo("11-g", 1, "0%", 0, 600, 600, 3, 1);
        lsTranslateTo("11-h", 1, "0%", 0, 800, 700, 3, 1);
        setTimeout(function () {
            showQRCode();
        }, 10);
    }
    else if($indexh === 0 && $indexv === 1) {
        setTimeout(function () {
            var target1 = document.getElementById("12-a");
            beforeSlide(target1, 500, -500, -500, 500, $direction, true, 1200);
        }, 50);
        lsScaleTo("12-b", 1, 1, 1, 400, 600, $direction);
        setTimeout(function () {
            var target1 = document.getElementById("12-c");
            beforeSlide(target1, 500, 0, -500, 0, $direction, true, 1200);
        }, 300);
        setTimeout(function () {
            var target1 = document.getElementById("12-d");
            beforeSlide(target1,-400, 0, 400, 0, $direction, true, 900);
        }, 600);
    }
    else if($indexh === 0 && $indexv === 2) {
        setTimeout(function () {
            var target1 = document.getElementById("13-a");
            beforeSlide(target1, 0, -500, 0, 500, $direction, true, 1200);
        }, 50);

        setTimeout(function () {
            var target2 = document.getElementById("13-b");
            beforeSlide(target2, -300, 150, 300, 0, $direction, true, 800);
        }, 80);

        setTimeout(function () {
            var target3 = document.getElementById("13-c");
            beforeSlide(target3, 500, 150, -500, 0, $direction, true, 900);
        }, 100);

        lsScaleTo("13-d", 1, 1, 1, 400, 600, $direction);
        setTimeout(function () {
            var target1 = document.getElementById("13-e");
            beforeSlide(target1, 500, 0, -500, 0, $direction, true, 1200);
        }, 300);
        setTimeout(function () {
            var target1 = document.getElementById("13-f");
            beforeSlide(target1,-400, 0, 400, 0, $direction, true, 900);
        }, 600);
    }
    else if($indexh === 0 && $indexv === 3) {
        lsScaleTo("14-a", 1, 1, 1, 400, 600, $direction);
        setTimeout(function () {
            var target1 = document.getElementById("14-b");
            beforeSlide(target1, 500, 0, -500, 0, $direction, true, 1200);
        }, 300);
        setTimeout(function () {
            var target1 = document.getElementById("14-c");
            beforeSlide(target1,-400, 0, 400, 0, $direction, true, 900);
        }, 600);
    }
    else if($indexh === 0 && $indexv === 4) {
//            setTimeout(function () {
//                var target1 = document.getElementById("15-d");
//                beforeSlide(target1, 500, -500, -500, 500, $direction, true, 1200);
//            }, 50);
        lsScaleTo("15-d", 1, 1, 1, 500, 200, $direction);
        lsScaleTo("15-a", 1, 1, 1, 400, 600, $direction);
        setTimeout(function () {
            var target1 = document.getElementById("15-b");
            beforeSlide(target1, 500, 0, -500, 0, $direction, true, 1200);
        }, 300);
        setTimeout(function () {
            var target1 = document.getElementById("15-c");
            beforeSlide(target1,-400, 0, 400, 0, $direction, true, 900);
        }, 600);
    }
    else if($indexh === 0 && $indexv === 5) {
        LsSlider.slidePause();
        setTimeout(function () {
            var target1 = document.getElementById("16-b");
            beforeSlide(target1, 500, 0, -500, 0, $direction, true, 1200, function () {
                beforeSlide(document.getElementById("16-a"), 500, 0, -500, 0, $direction, true, 50, function () {
                    document.querySelectorAll(".flashlight")[0].classList.add("flash");
//                        lsTranslateTo("lsForm", 1, 0, -1000, 900, 10, 1, 0.4);
                    lsTranslateTo("16-e", 1, -bodyWidth*0.8, -bodyHeight*0.55, 1000, 20, 2, 1);
                    lsTranslateTo("16-f", 1, -bodyWidth*0.35, -bodyHeight*0.5, 1100, 200, 2, 1);
                    lsTranslateTo("16-g", 1, -bodyWidth*0.82, -bodyHeight*0.3, 1200, 400, 2, 1);
                    lsTranslateTo("16-h", 1, -bodyWidth*0.35, -bodyHeight*0.28, 1300, 600, 2, 1, function () {
                        LsSlider.slideRestart();
                    });

                });
            });
        }, 300);
        setTimeout(function () {
            var target1 = document.getElementById("16-c");
            beforeSlide(target1, 500, 0, -500, 0, $direction, true, 1000);
        }, 200);
        setTimeout(function () {
            var target1 = document.getElementById("16-d");
            beforeSlide(target1,-400, 0, 400, 0, $direction, true, 800);
        }, 200);

//            if(readCookie("showQRCodePage") !== "show") {
//                setTimeout(function () {
//                    lsScaleTo("11-f", 1, 1, 1, 400, 300, $direction);
//                    setTimeout(function () {
//                        showQRCode();
//                    }, 10);
//                }, 300);
//            }
    }
    else if($indexh === 0 && $indexv === 6) {

//            $("#17-c").show();
        lsTranslateTo("17-b", 1, "0%", 0, 500, 100, $direction, 1, function() {
            $("#17-a").show( "bounce", { times: 3 }, 1000 );
        });
//            document.querySelector("#bigBg").style.transform = "scale(0.5, 0.5)";
//            document.querySelector("#bigBg").style.webkitTransform = "scale(0.5, 0.5)";
//            setTimeout(function () {
//                lsTranslateTo("17-b", 1, "0%", 0, 500, 100, $direction, 1, function() {
//                    $("#17-a").show( "bounce", { times: 3 }, 1000 );
//                });
//            }, 4000);
//            var $image = new Image();
//            $image.src = "./images/chezhan/location.png";
//            $image.onload = function () {
//                $("#17-a").show( "bounce", { times: 3 }, 1000 );
//            };

    }
    else if($indexh === 0 && $indexv === 7) {
        lsScaleTo("18-a", 1, 1, 1, 400, 300, $direction);
//            lsTranslateTo("18-b", 1, 0, 0, 800, 700, 3, 1);

        if(readCookie("showQRCodePage") !== "show") {
            setTimeout(function () {
                lsTranslateTo("18-c", 1, 0, 0, 800, 700, 3, 1);
                setTimeout(function () {
                    showQRCode();
                }, 10);
            }, 300);
        }
    }
    $CurrentH = $indexh;
    $CurrentV = $indexv;

    if($CurrentV === event.lastVertical) {
        document.querySelectorAll(".arrow")[0].style.opacity = 0;
    }
    else {
        document.querySelectorAll(".arrow")[0].style.opacity = 1;
    }
    event.setTouchEndDelay(50);
});

// 点击购买
var purchase = document.getElementById("11-f"),
    purchaseForm = document.getElementById("lsForm"),
    animationZoom = document.getElementById("animationZoom");

var purchaseBtnWithoutMove = true;
var _m = function () {
        purchaseBtnWithoutMove = false;
    },
    _e = function () {
        if(userActionAvailable && purchaseBtnWithoutMove && (readCookie("showQRCodePage") !== "show") ) {
            purchaseForm.style.display = "block";
            setTimeout(function () {
                animationZoom.style.display = "none";
            }, 300);
            lsTranslateTo("lsForm", 1, 0, 0, 500, 100, 3, 1);
        }
        else {
        }
        purchaseBtnWithoutMove = true;
    };
purchase.addEventListener("touchend", _e, false);
purchase.addEventListener("touchmove", _m, false);

document.getElementById("18-c").addEventListener("touchmove", _m, false);
document.getElementById("18-c").addEventListener("touchend", _e, false);



var qrcodePage = document.querySelector("#lsQRCode");

var closeForm = function (_callback) {
    animationZoom.style.display = "block";
    lsTranslateTo("lsForm", 1, bodyWidth, 0, 400, 10, 1, 1, function () {
        purchaseForm.style.display = "none";
        var inputs = purchaseForm.getElementsByTagName("input");
        for(var i = 0; i < inputs.length; i++) {
            inputs[i].removeAttribute("disabled");
        }
        if(_callback) {
            _callback();
        }
    });
};

var showQRCode = function (_callback) {
    if(userActionAvailable && readCookie("showQRCodePage") === "show") {
        userActionAvailable = false;
        qrcodePage.style.display = "block";
        var qrcodeTimeout = setTimeout(function () {
            qrcodePage.style.opacity = 1;
            qrcodePage.style.transform = "translate(0px, 0px)";
            qrcodePage.style.webkitTransform = "translate(0px, 0px)";
            qrcodePage.style.mozTransform = "translate(0px, 0px)";
            qrcodePage.style.oTransform = "translate(0px, 0px)";
            var callbackTimeout = setTimeout(function () {
                if(_callback) {
                    _callback();
                }
                userActionAvailable = true;
                clearTimeout(callbackTimeout);
            }, 500);
            clearTimeout(qrcodeTimeout);
        }, 20);
    }
};

// 表单动作监听
var plus = document.querySelector("#btn_plus"),
    subtract = document.querySelector("#btn_subtract"),
    quantity = document.querySelector("#quantity"),
    btnClose = document.querySelector("#cancel"),
    pay = document.querySelector("#pay"),
    firstSlider = document.querySelectorAll(".stage11")[0];

plus.addEventListener("touchend", function () {
    quantity.value = parseInt(quantity.value) + 1;
}, false);
subtract.addEventListener("touchend", function () {
    quantity.value = (parseInt(quantity.value) - 1 > 0)?(parseInt(quantity.value) - 1):1;
}, false);
btnClose.addEventListener("touchstart", function () {
    var inputs = purchaseForm.getElementsByTagName("input");
    for(var i = 0; i < inputs.length; i++) {
        inputs[i].setAttribute("disabled", "disabled");
    }
}, false);
btnClose.addEventListener("touchend", function () {
    closeForm();
//        updateElementTransform(purchaseForm, 0, -1000, 800);
}, false);
btnClose.addEventListener("touchmove", function (evt) {
    evt.preventDefault();
}, false);
pay.addEventListener("touchend", function () {
    closeForm(function () {
//            qrcodePage.style.display = "block";
//            setTimeout(function () {
//                qrcodePage.style.opacity = 1;
//                showQRCodePage = "show";
//                createCookie("showQRCodePage", showQRCodePage, 30);
//            }, 20);
        showQRCodePage = "show";
        createCookie("showQRCodePage", showQRCodePage, 30);
        showQRCode();
    });
}, false);

document.querySelector("#test").addEventListener("click", function () {
    eraseCookie("showQRCodePage");
    alert("缓存已经清除");
}, false);

document.getElementById("17-a").addEventListener("click", function () {
    location.href = "http://api.map.baidu.com/marker?location=31.19393953869,121.30943101003&title=上海国际会展中心&content=上海国际会展中心&output=html"
}, false);

document.getElementById("17-b").addEventListener("click", function () {
    location.href = "http://api.map.baidu.com/marker?location=31.19393953869,121.30943101003&title=上海国际会展中心&content=上海国际会展中心&output=html"
}, false);

// 自定义select
var lsSelectInit = function () {
    var lsSelect = document.querySelectorAll(".lsSelect")[0],
        lsSelectLabel = lsSelect.querySelectorAll("div")[0],
        lsSelectedText = lsSelectLabel.querySelectorAll("p")[0],
//                showSelect = lsSelect.querySelectorAll("img")[0],
        lsSelectUl = lsSelect.querySelectorAll("ul")[0],
        lsSelectLis = lsSelectUl.querySelectorAll("li");

    var selectOpened = false;
    var _showSelect = function () {
            lsSelectUl.style.display = "block";
            selectOpened = true;
            setTimeout(function () {
                lsSelectUl.style.opacity = 1;
                lsSelectUl.style.transition = "opacity .3s ease-in-out";
                lsSelectUl.style.webkitTransition = "opacity .3s ease-in-out";
                lsSelectUl.style.mozTransition = "opacity .3s ease-in-out";
                lsSelectUl.style.oTransition = "opacity .3s ease-in-out";
            }, 20);
        },
        _hiddenSelect = function () {
            lsSelectUl.style.opacity = 0;
            lsSelectUl.style.transition = "opacity .3s ease-in-out";
            lsSelectUl.style.webkitTransition = "opacity .3s ease-in-out";
            lsSelectUl.style.mozTransition = "opacity .3s ease-in-out";
            lsSelectUl.style.oTransition = "opacity .3s ease-in-out";

            setTimeout(function () {
                selectOpened = false;
                lsSelectUl.style.display = "none";
            }, 300);
        };
    var _toggleSelect = function () {
        if(selectOpened) {
            _hiddenSelect();
        }
        else {
            _showSelect();
        }
    };

    for(var j = 0; j < lsSelectLis.length; j++) {
        if(lsSelectLis[j].getAttribute("selected") === "selected") {
            lsSelectedText.innerText = lsSelectLis[j].innerText;
        }
    }
    for(var i = 0; i < lsSelectLis.length; i++) {
        lsSelectLis[i].addEventListener("touchstart", (function (i) {
            return function () {
                lsSelectLis[i].style.backgroundColor = "darkgray";
            }
        })(i), false);
        lsSelectLis[i].addEventListener("touchend", (function (i) {
            return function () {
                lsSelectLis[i].style.backgroundColor = "rgba(0, 0, 0, 1)";
                _hiddenSelect();
                lsSelectedText.innerText = lsSelectLis[i].innerText;
            }
        })(i), false);
    }
    lsSelectedText.addEventListener("touchend", function () {
        lsSelectUl.style.width = (lsSelect.scrollWidth + 6) + "px";
        _toggleSelect();
    }, false);

    // 点击表单非selector区域关闭选项
    document.querySelector("#lsFormBg").addEventListener("touchend", function () {
        _hiddenSelect();
    }, true);
};
lsSelectInit();
